import React, { Component ,Fragment } from 'react';
import TodoItem from './TodoItem'
import './style.css'

class TodoList extends Component {
  constructor(props){
    super(props)
    this.state = {
      list:[
      ],
      inputValue:''
    }
    //优化
    this.handleDelete = this.handleDelete.bind(this)
    this.handleChangeInput = this.handleChangeInput.bind(this)
    this.handleBtnClick = this.handleBtnClick.bind(this)
  }
  handleBtnClick(){
    this.setState({
      list:[...this.state.list,this.state.inputValue],
      inputValue:''
    })
  }
  handleChangeInput(e){
    this.setState({
      inputValue:e.target.value
    })
  }
  handleDelete(index){
    const list = [...this.state.list]
    list.splice(index,1)
    this.setState({
      list
    })
  }
  getToItem(){
    return (
      this.state.list.map((item,index)=>{
        return <TodoItem handleDelete={this.handleDelete} content={item} key={index} index={index} />
      })
    )
  }
  render() {
    return (
      <Fragment>
        <div>
        <input value={this.state.inputValue} onChange={this.handleChangeInput}/>
        <button className="red-btn" style={{color:'#fff'}} onClick={this.handleBtnClick}>点击我</button>
        </div>
        <ul>
          {this.getToItem()}
        </ul>
      </Fragment>
    );
  }
}

export default TodoList;